<template>
  <msg-box :message="message">
    <!-- 视频消息 -->

    <video
      class="message-video"
      controls
      :src="content"
      :title="message.content?.title || '视频'"
      :poster="message.content?.poster"
    >
      <track
        v-if="message.content?.trackUrl"
        kind="subtitles"
        :src="message.content.trackUrl"
        srclang="zh"
        label="中文"
      />
    </video>
  </msg-box>
</template>
<script setup lang="ts">
import { computed } from "vue";
import msgBox from "./msg-box.vue";

// 监听消息变化
const message = defineModel("message", {
  type: Object,
  required: false,
  default: () => {},
});

// 解析消息
const content = computed((): string => {
  return message.value?.content?.url || "";
});
</script>
<style scoped lang="scss">
.message-video {
  width: 450rpx;
  height: 300rpx;
  border-radius: 10rpx;
}
</style>
